<template>
  <div>
    <h1>兄弟1</h1>
    <son-one></son-one>
    <button @click="searchEmitOn">查看emiton在哪里</button>
  </div>
</template>

<script>
import SonOne from "./SonOne.vue";
export default {
  beforeCreate() {
    console.log(this);
    console.log(this.msg); //undefined
    // 如果在此处this不能访问到 报错  undefined.msg
  },
  created() {
    console.log(this);
  },
  mounted() {
    console.log(this);
    // 在mounted当中通过$on绑定事件
    this.$on("hanhan", () => {
      console.log("我是涵涵");
    });
    // $emit触发事件
    this.$emit("hanhan");

    this.$eventBus.$on("fuhao", (msg) => {
      console.log("将来称为富豪后，一定要请我们吃顿饭！！");
      console.log(msg);
    });
  },
  data() {
    return {
      msg: "",
    };
  },
  components: {
    SonOne,
  },
  methods: {
    searchEmitOn() {
      console.log(this);
      //   this是咱们的当前的组件对象 ChildOne
      // $on $emit
    },
  },
};

/* 
事件
eventBus
事件名  
事件对应的回调函数

绑定事件的过程
@click = ()=>{}
$on("事件名字",()=>{})

触发事件的方法
$emit("事件名",参数)

$on $emit  this（当前组件组件，都在一个组件内）
任意组件（兄弟组件 父子  在不同组件当中this不一样，指向的永远是当前组件）
$on $emit vue实例对象的原型对象 new Vue() 它就是vue的实例对象 它上面就能访问到$on $emit



*/
</script>

<style lang="scss" scoped>
</style>